---
title: Select
description: Presents a selection of options for the user to choose from, activated by a button.
---
{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/select?raw';

<LinkButton href='https://rn-primitives.vercel.app/select'>Select Primitive</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/select'>
  Demo
</LinkButton>

<br />

Presents a selection of options for the user to choose from, activated by a button.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add select
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/select' className='text-white font-bold'> select primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/select.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/select.tsx' />
  </TabItem>
</Tabs>


### Usage

<Aside type="caution">

  Requires a `<PortalHost />` as the last child of your `<Root/>` (`app/_layout.tsx`) component

  ```tsx
  import { PortalHost } from '@rn-primitives/portal';

  function Root() {
    return (
      <>
        <Stack />
        {/* Default Portal Host (one per app) */}
        <PortalHost />
      </>
    );
  }
  ```

</Aside>

```tsx
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '~/components/ui/select';

function Example() {
  const insets = useSafeAreaInsets();
  const contentInsets = {
    top: insets.top,
    bottom: insets.bottom,
    left: 12,
    right: 12,
  };

  return (
    <Select defaultValue={{ value: 'apple', label: 'Apple' }}>
      <SelectTrigger className='w-[250px]'>
        <SelectValue
          className='text-foreground text-sm native:text-lg'
          placeholder='Select a fruit'
        />
      </SelectTrigger>
      <SelectContent insets={contentInsets} className='w-[250px]'>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem label='Apple' value='apple'>
            Apple
          </SelectItem>
          <SelectItem label='Banana' value='banana'>
            Banana
          </SelectItem>
          <SelectItem label='Blueberry' value='blueberry'>
            Blueberry
          </SelectItem>
          <SelectItem label='Grapes' value='grapes'>
            Grapes
          </SelectItem>
          <SelectItem label='Pineapple' value='pineapple'>
            Pineapple
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}
```

## Props

### Select

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop     |           Type           |     Note     |
| :----------: | :----------------------: | :----------: |
|     defaultValue     |         option: \{ value: string, label: string \} \| undefined          | _(optional)_ |
|     value     |         option: \{ value: string, label: string \} \| undefined          | _(optional)_ |
| onValueChange | (option: \{ value: string, label: string \} \| undefined ) => void | _(optional)_ |
| onOpenChange | (value: boolean) => void | _(optional)_ |
|   disabled   |         boolean          | _(optional)_ |
|   asChild    |         boolean          | _(optional)_ |
|   dir    |         'ltr' \| 'rtl'          | Web only _(optional)_ |
|   name    |         string          | Web only _(optional)_ |
|   required    |         boolean          | Web only _(optional)_ |

### SelectTrigger

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |


### SelectContent

Extends [`View`](https://reactnative.dev/docs/view#props) props

|         Prop         |        Type         |         Note          |
| :------------------: | :-----------------: | :-------------------: |
|       asChild        |       boolean       |     _(optional)_      |
|      forceMount      |  true \| undefined  |     _(optional)_      |
|       alignOffset       |                    number                    |     _(optional)_       |
|         insets          |                    Insets                    |     _(optional)_       |
|     avoidCollisions     |                   boolean                    |     _(optional)_       |
|          align          |         'start' \| 'center' \| 'end'         |     _(optional)_       |
|          side           |              'top' \| 'bottom'               |     _(optional)_       |
|       sideOffset        |                    number                    |     _(optional)_       |
| disablePositioningStyle |                   boolean                    |     Native Only _(optional)_       |
|   position    | 'popper' \| 'item-aligned' \| undefined | Web Only _(optional)_ |


### SelectItem

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| value | string |                 |
| label | string |                 |
| closeOnPress | boolean | _(optional)_ |
| asChild | boolean | _(optional)_ |


### SelectGroup

Extends [`View`](https://reactnative.dev/docs/view#props) props


### SelectLabel

Extends [`Text`](https://reactnative.dev/docs/text#props) props


### SelectSeparator

Extends [`View`](https://reactnative.dev/docs/view#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| value | string |                 |
| label | string |                 |
| closeOnPress | boolean | _(optional)_ |
| asChild | boolean | _(optional)_ |

